<template>
  <CloudDialog
    v-model:visible="visible"
    title="站点详情"
    :width="700"
    :loading="loading"
    :mask-closable="false"
    :footer="false"
    :before-open="handleBeforeOpen">
    <a-alert class="mb-6">
      若有失败记录请检查解析相关配置/或者手动添加解析记录</a-alert
    >
    <a-table :columns="columns" :data="data" :pagination="false" sticky-header>
      <template #cname="{ record }">
        <CopyField :edit="() => open(record)">{{
          record.full_cname || '-'
        }}</CopyField>
      </template>
      <template #status="{ record }">
        <div class="flex">
          <span>
            {{
              getOptionsLabel(
                siteResolveStatusOptions,
                record.provider_rr_status
              )
            }}
          </span>
          <span v-if="record.provider_rr_status_text"
            >（{{ record.provider_rr_status_text }}）</span
          >
        </div>
      </template>
    </a-table>

    <a-pagination
      v-model:current="pagination.current"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      show-total
      show-page-size
      :page-size-options="[10, 15, 20, 30, 50]"
      class="mt-6 justify-end"
      @change="(v) => handleChange(v, pagination.pageSize)"
      @page-size-change="(v) => handleChange(1, v)" />
    <EditCname
      v-model="cnameVisible"
      :record="siteData"
      @reload="run"></EditCname>
  </CloudDialog>
</template>
<script lang="ts" setup>
import type { AreaItem } from '@/apis/model/resolve'
import { getApiResolveRegionSiteBindingsApi } from '@/apis/modules/resolve/area'
interface IProp {
  areaData?: AreaItem
}
const visible = defineModel<boolean>('visible', { required: true })
const props = withDefaults(defineProps<IProp>(), {})
const { visible: cnameVisible, open, data: siteData } = usePopup()
const queryParams = ref({
  region_id: ''
})

const columns = buildColumns([
  {
    title: '站点域名',
    dataIndex: 'site_name',
    format: 'copy'
  },
  {
    title: 'CNAME域名',
    dataIndex: 'full_cname',
    slotName: 'cname'
  },
  {
    title: '解析状态',
    dataIndex: 'resolve_status',
    width: 160,
    slotName: 'status'
  }
])

const { data, loading, run, pagination } = useListRequest(
  getApiResolveRegionSiteBindingsApi,
  {
    params: queryParams,

    immediate: false
  }
)
const handleChange = (current: number, limit: number) => {
  pagination.value.current = current
  pagination.value.pageSize = limit
  run()
}
const handleBeforeOpen = () => {
  queryParams.value.region_id = props.areaData?.id || ''
  return run()
}
</script>
<style lang="less" scoped>
:deep(.arco-alert-content) {
  font-size: 14px;
}
</style>
